<template>
    <div class="newsDetilRoot">
        <div class="news_head">
             <h3>{{newsData.title}}</h3>
             <p>日期:{{newsData.time}}</p>
             <p>{{newsData.source}}</p>
        </div>

        <div class="news_body" v-html="newsData.context">
        </div>

        <chy-comment ref="commentCom" :commentUrl="commentUrl" :itemId="id" :saveUrl="saveUrl"></chy-comment>

    </div>

</template>


<script> 
import {Toast} from 'mint-ui';
 
export default {
    data:function(){
        return {
            newsData:{},
            commentUrl:"news/comment",
            id:"",
            saveUrl:"news/save"
        }
    },
    created() {
        let id = this.$route.query.id;
        this.initData(id);
        this.id = id;
    },

    methods:{
        initData(id){
           this.$http.get(`news/detail/${id}`).then(function(res){
               if(!res.ok){
                   Toast("获取数据失败");
               }
               let data = res.body.data;
               this.newsData = data;
               this.$refs.commentCom.statrtloard();
           });
        },
    }
}
</script>


<style >
    .newsDetilRoot{
        margin-left: 10px;
        margin-right: 10px;
    }

    .news_head p{
        margin-bottom: 7px;
        line-height: 10px;
        font-size: 10px;
    }
    
    .news_head h3{
        margin-bottom: 11px;
        margin-top: 10px;
    }

    .news_head{
        border-bottom: 1px solid #8f8f94
       
    }

    .news_body {
        margin-bottom: 17px;
        padding-bottom: 12px;
        border-bottom: 3px solid #8f8f94;

    }

     .news_body img{
        width: 100%;

    }


.qu_ocn {
    font: 16px/32px microsoft yahei
}

.qu_ocn p {
    font: 16px/32px microsoft yahei;
    margin-bottom: 20px
}

.qu_ocn p span {
    font: 16px/32px microsoft yahei,verdana
}

.qu_ocn h2 {
    font: bold 16px/32px microsoft yahei,verdana;
    margin-bottom: 20px
    
}

.qu_ocn ul {
    margin-bottom: 20px
}

.qu_ocn ul li {
    font: 16px/32px microsoft yahei,verdana;
    padding: 0 0 0 16px;
    list-style: disc inside;
    display: list-item
}

.qu_ocn ol li {
    font: 16px/32px microsoft yahei,verdana;
    padding: 0 0 0 16px;
    list-style: decimal inside;
    display: list-item
}

.qu_ocn p:last-child{
    margin-bottom: 0px;
}




</style>
